<template>
    <el-row>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple"/>
        </el-col>
        <el-col :span="8"
                v-loading="loading"
                element-loading-text="修改中..."
                :element-loading-spinner="loadingSvg"
                element-loading-svg-view-box="-10, -10, 50, 50"
                element-loading-background="rgba(255,250,240,0.8)">
            <div class="grid-content ep-bg-purple-light"/>
            <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
            >
                <el-form-item label="原密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="确认新密码" prop="checkNewPassword">
                    <el-input v-model="ruleForm.checkNewPassword" type="password" autocomplete="off"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">修改密码</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple"/>
        </el-col>
    </el-row>
</template>


<script lang="ts" setup>
    import {onMounted, reactive, ref} from 'vue'
    import type {FormInstance} from 'element-plus'
    import {ElMessage} from 'element-plus'
    import {loginFunction, registerFunction} from '@/common/service/login'
    import {useRouter} from 'vue-router'
    import {updatePassword} from '@/api/user'
    import {getUserInfo} from '@/api/login'

    let loading = ref(false)
    // 路由全局配置 相当于vue2中的this.$router
    const router = useRouter()
    const ruleFormRef = ref<FormInstance>()


    const validatePass = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请填写密码!'))
        } else {
            callback()
        }
    }

    const checkValidatePass = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请再次填写密码'))
        } else if (value !== ruleForm.newPassword) {
            callback(new Error("两次填写的密码不一样!"))
        } else {
            callback()
        }
    }

    const ruleForm = reactive({
        username: '',
        password: '',
        newPassword: '',
        checkNewPassword: '',
    })

    const rules = reactive({
        password: [{validator: validatePass, trigger: 'blur'}],
        newPassword: [{validator: validatePass, trigger: 'blur'}],
        checkPassword: [{validator: checkValidatePass, trigger: 'blur'}],
    })

    const submitForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.validate((valid) => {
            if (valid) {
                updatePassword(ruleForm)
                    .then(res => {
                        if (res['code'] == 200) {
                            const password = ruleForm.newPassword;
                            formEl.resetFields()
                            ElMessage({
                                showClose: true,
                                message: "正在自动登陆...",
                                type: 'success',
                            });
                            return loginFunction(ruleForm.username, password)
                        }
                    })
                    .then(function (result) {
                        router.push({name: 'home'})
                    })
            } else {
                console.log('error submit!')
                return false
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    onMounted(() => {
        getUserInfo().then(res => {
            ruleForm.username = res.data.account;
        });
    });
</script>
